<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>方法设置页面</title>
    <!-- Bootstrap core CSS -->
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link href="/css/index.css" rel="stylesheet">
    <link rel="stylesheet" href="/css/ladda/ladda-themeless.min.css">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top site-navbar">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                    aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/function">方法设置页面</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li><a href="#">随</a>
                </li>
                <li><a href="#">便</a>
                </li>
                <li><a href="#">开</a>
                </li>
                <li><a href="#">发</a>
                </li>
                <li><a href="#">的</a>
                </li>
                <li><a href="#">玩</a>
                </li>
                <li><a href="#">意</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<main class="benefits container">
    <!-- Example row of columns -->
    <div class="row" style="padding: 20px 20px 0 20px;">
        <div class="form-group">
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="name" class="col-sm-2 control-label">方法名字</label>
                        <div class="col-sm-10">
                            <input type="email" class="form-control" id="name" placeholder="方法名字">
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="type" class="col-sm-2 control-label">类别</label>
                        <div class="col-sm-10">
                            <input type="email" class="form-control" id="type" value="0" placeholder="类别">
                        </div>
                    </div>
                </div>
            </div>
            <label for="input_url"><h2>请输入方法的SQL</h2></label>
            <textarea id="sql" class="form-control" rows="3" onblur="initTagData()"></textarea>
                    <input type="email" class="form-control" id="data" placeholder="参数" style="margin-top: 20px;">
        </div>

    </div>
    <button type="button" onclick="submit()" style="margin-bottom: 20px;" class="btn btn-primary btn-lg btn-block">保存</button>

    <div class="row marketing">
        <div class="bs-example" data-example-id="simple-table">
            <table class="table">
                <thead>
                <tr>
                    <th>#</th>
                    <th>方法名字</th>
                    <th width="30%">sql</th>
                    <th>创建时间</th>
                    <th>类别</th>
                    <th>参数</th>
                    <th>删除</th>
                </tr>
                </thead>
                <tbody>
                <#if functionList?? && (functionList?size > 0) >
                    <#list functionList!"" as c>
                        <tr>
                            <th scope="row">${c_index+1}</th>
                            <td>${c.name ! ''}</td>
                            <td width="30%">${c.sql ! ''}</td>
                            <td>${c.create_date ! ''}</td>
                            <td>${c.type ! ''}</td>
                            <td>${c.data ! ''}</td>
                            <td>
                                <button class="btn btn-xs btn-danger" onclick="deleteFunction('${c.name ! ""}')">删除</button>
                            </td>
                        </tr>
                    </#list>
                </#if>
                </tbody>
            </table>
        </div>
    </div>

    <footer class="footer">
        <p>&copy; Copyright © 2017 yttrium2016.cn </p>
    </footer>
</main>
<script src="/js/jquery-3.2.1.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/layer/layer.js"></script>
<script src="/js/ladda/spin.min.js"></script>
<script src="/js/ladda/ladda.min.js"></script>
<script>
    //常量
    var ajaxData = '';
    var ajaxSql = '';
    var ajaxType = 0;
    var ajaxName = '';

    function initTagData() {
        ajaxSql = $('#sql').val();
        var regex = /\$\{(.+?)\}/g;
        var result;
        ajaxData = '';
        while ((result = regex.exec(ajaxSql)) != null) {
            if (typeof result[1] != 'undefined' && ajaxData.indexOf(result[1]) === -1) {
                if (ajaxData === '') {
                    ajaxData = result[1]
                } else {
                    ajaxData += ',' + result[1]
                }
            }
        }
        $('#data').val(ajaxData);
    }

    function submit() {
        ajaxType = $('#type').val();
        ajaxSql = $('#sql').val();
        ajaxName = $('#name').val();
        ajaxData = $('#data').val();
        if(!ajaxType){
            ajaxType = 0;
        }
        if(!ajaxName){
            layer.msg('请输入方法名字..');
            return;
        }
        if(!ajaxSql){
            layer.msg('请输入SQL..');
            return;
        }
        if(!ajaxData){
            ajaxData = "";
        }
        $.ajax({
            url: "/function/create",    //请求的url地址
            async: true, //请求是否异步，默认为异步，这也是ajax重要特性
            dataType: "JSON",
            data: {
                data: ajaxData,
                type:ajaxType,
                name:ajaxName,
                sql:ajaxSql
            },    //参数值
            cache: false,
            type: "GET",   //请求方式
            success: function (data, textStatus) {
                if (!!data) {
                    if (data.code == 0) {
                        layer.msg(data.msg);
                        setTimeout(function () {
                            location.reload();
                        },800)
                    } else {
                        layer.msg(data.msg);
                    }
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                console.log("go Ajax error");
            }
        });
        return false;
    }

    function deleteFunction(name) {
        $.ajax({
            url: "/function/delete",    //请求的url地址
            async: true, //请求是否异步，默认为异步，这也是ajax重要特性
            dataType: "JSON",
            data: {
                name: name
            },    //参数值
            cache: false,
            type: "GET",   //请求方式
            success: function (data, textStatus) {
                layer.msg(data.msg);
                setTimeout(function () {
                    location.reload();
                },800)
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                console.log("go Ajax error");
            }
        });
    }

    $(function () {

    });

</script>
</body>
</html>